<!DOCTYPE html>


<html>
    <head>
        <title>Presentation</title>

        <meta charset='utf-8'>
        <script
        src='slides.js'></script>
    </head>



    <body style='display: none'>

        <section class='slides layout-regular template-default'>


            <article class='fill'>
                <h3 style=" background-image: url(images/bg-pinstripe.png);
                    background-repeat-x: repeat;
                    background-repeat-y: no-repeat;
                    background-attachment: initial;
                    background-position-x: 0%;
                    background-position-y: 0%;
                    background-origin: initial;
                    background-clip: initial;
                    background-color: black;
                    color:#999999;

                    height:100px;
                    " >
                    <br/>
                    Atelier Developpement Web
                </h3>

                <h3> INSAT  <p align="right">
                        Année universitaire 2011/2012
                    </p>
                </h3>
                <p>
                    <img src='images/js.jpg'>
                </p>
                <div class='source white' style="font-size: 20px ;">
                    <b> * réaliser par : Wadii Chemkhi</b>
                </div>
            </article>

            <article>
                <h1>
                    Programmation Orientée Objet
                    <br>
                    Avec java Script
                </h1>
                <p>
                    comment faire sans
                    <br>
                    des classes ?
                </p>
            </article>

            <article>
                <h3>
                    Plan de presentation :
                </h3>
                <ul class="build" >
                    <li>
                        Rappel sur la notion <b>Object</b> en javascript
                    </li>
                    <li>
                        Rappel sur la technique de <b>Construction</b>
                    </li>
                    <li>
                        Discussion sur la technique d'<b>Héritage</b>
                    </li>
                    <li>
                        Discussion sur la <b>Polymorphisme</b>
                    </li>

                </ul>


            </article>

            <article class='smaller'>
                <h3>JavaScript Objects:</h3>
                <q>
                    An object is a container of properties, where a property has a name and a value
                </q>
                <div class='author'>
                    Douglas Crockford
                </div>
            </article>

            <article>
                <h3>
                    Exemple :
                </h3>
                <section>
                    <pre>
&lt;script type='text/javascript'&gt;

  //Creation d'un objet
  var ob={};
  //modification de structure de l'objet
  ob.proprite1="valeur1";
  ob.proprite2=2;
  //ajout d'une methode
  ob.afficher=function(){

                alert("proprite1:"+this.proprite1+" "+
                               "proprite2:"+this.proprite2);
                        };
    
&lt;/script&gt;

                    </pre>
                </section>
            </article>

            <article class='fill'>
                <h3>
                    Application : le cas classique de la classe personne
                </h3>



                <iframe id="code" src="editor.html" ></iframe>

            </article>

            <article class='smaller'>
                <h3>JavaScript Constructors:</h3>
                <q>
                    To create a new instance of an object obj we use the statement new obj, assigning the result (which is of type obj) to a variable to access it later.

                </q>

                <div class='author'>
                    developer.mozilla.org
                </div>
            </article>

            <article>
                <h3>
                    Exemple :
                </h3>
                <section>
                    <pre>
&lt;script type='text/javascript'&gt;

  function Person(nom,age) {  
  this.nom = nom;  
  this.age = age;  
  this.afficher=function(){

                alert("nom:"+this.nom+" , "+
                               "age:"+this.age);};
                    }  
  ali= new Person("ali",19);
  ali.afficher();
  
    
&lt;/script&gt;

                    </pre>
                </section>
            </article>

            <article class='fill'>
                <h3>
                    Application : 
                </h3>



                <iframe id="code" src="editor.html" ></iframe>

            </article>
            <article>
                <h1>
                    L'Héritage ?


                </h1>




                <h3> Tout dépend des Prototypes !</h3>
            </article>

            <article>
                <h3>
                    Explication : 
                </h3>
                <br>
                <div >
                    Chque Objet en javascript est créer avec une liaison cachée

                    Une liaison a un autre objet qui lui sert comme prototype 

                    c'est une sorte d'initialisation de structure .

                </div>
            </article>
            <article class='smaller'>
                <h3>
                    Exemple :
                </h3>
                <section>
                    <pre>
&lt;script type='text/javascript'&gt;
function Personne(nom) {// definir la classe Personne
this.nom=nom;
}  
Personne.prototype.marcher = function(){  
    alert ('je marche !');  
    };  
Personne.prototype.direSalu = function(){  
    alert ('Salu je suis '+this.nom);  
    }; 
function Etudiant(nom) {  // definir la classe d'etudian
  Personne.call(this,nom);  // Appeler le constructeur du classe mere 
   }  
  Etudiant.prototype= new Personne();//Hériter de Personne
  Etudiant.prototype.constructor = Etudiant;//correction de constructeur
  Etudiant.prototype.direBye = function(){  //on ajoute des methode pour Etudianr
  alert('Bye Bye');};
  
  var ali = new Etudiant("Ali");
   ali.marcher();
   ali.direSalu();
   ali.direBye();
&lt;/script&gt;
                    </pre>
                </section>
            </article>
            <article class='fill'>
                <h3>
                    Voulez vous le tester ?
                </h3>



                <iframe id="code" src="editor.html" ></iframe>

            </article>

            <article class='smaller'>
                <h3>
                    Exemple :
                </h3>
                <section>
                    <pre>
&lt;script type='text/javascript'&gt;

 //continuation 
 Etudiant.prototype.direSalu = function(){  
    alert ('Salu je suis '+this.nom+' et je suis un etudiant');  
    }; 
  
  var ahmed = new Etudiant("Ahmed");
   
   ahmed.direSalu();
   //et voila la polymorphisme en javascript

// <---- economiser et réutiliser l'interpréteur précédent ! 

&lt;/script&gt;
                    </pre>
                </section>
            </article>
        </section>

    </body>
</html>
